<template>
  <div class="index">
    <div class="item" v-for="(item, index) in allCom" :key="item">
      <span class="order">{{ index + 1 > 9 ? index + 1 : "0" + (index + 1) }}</span>
      <component :is="item"></component>
    </div>
    <div class="item">待续......</div>
  </div>
</template>
<script>
export default {
  components: {
    Loading1: () => import("@/components/loading1.vue"),
    Loading2: () => import("@/components/loading2.vue"),
    Loading3: () => import("@/components/loading3.vue"),
    Loading4: () => import("@/components/loading4.vue"),
    Loading5: () => import("@/components/loading5.vue"),
    Loading6: () => import("@/components/loading6.vue"),
    Loading7: () => import("@/components/loading7.vue"),
    Loading8: () => import("@/components/loading8.vue"),
    Loading9: () => import("@/components/loading9.vue"),
    Loading10: () => import("@/components/loading10.vue"),
  },
  data() {
    return {
      allCom: [
        "Loading1",
        "Loading2",
        "Loading3",
        "Loading4",
        "Loading5",
        "Loading6",
        "Loading7",
        "Loading8",
        "Loading9",
        "Loading10",
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.index {
  width: 100%;
  min-height: 100vh;
  color: #fff;
  background-color: black;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 180px);
  gap: 10px;
  .item {
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #aaa;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    .order {
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
  }
  .item:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
</style>
